<template>
  <div id="app">
    <Navbar id="nav"></Navbar>
    <router-view :key="$route.path" ></router-view>
  </div>
</template>

<script>
import Navbar from "@/components/NavMenu";
export default {
  name: 'App',
  components:{
    Navbar
  }
}
</script>
<style lang="less">

.el-table {
  color: #c6d3ec;
}
.el-table th.el-table__cell {
  background: #202f3e;
  color: #34c4d0;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #41596f;
}
.el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #41596f;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: #41596f;
}
.el-table th.el-table__cell > .cell {
  font-size: 18px;
}
.el-table .el-table__cell {
  padding: 10px 0 !important;
}
.el-table tr:nth-child(2n-1) {
  background-color: rgba(32, 47, 62, 0.7);
}
.el-table__body tr:nth-child(2n) {
  background-color: #202f3e;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #202f3e;
}
.card-table {
  background-color: #011c29;
  border: 1px solid #3e517c;
  font-size: 20px;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #263c44;
}
.el-table .cell {
  font-size: 17px;
}
.operate-btn {
  .el-button:focus,
  .el-button:hover {
    color: #fff;
    background-color: #41596f;
    border-color: #41596f;
  }
  .el-button {
    color: #fff;
    background-color: #247382;
    border-color: #247382;
    padding: 4px 20px !important;
    font-size: 18px;
  }
}
.el-pager li {
  font-size: 14px !important;
}
.el-pagination .btn-next,
.el-pagination .btn-prev,
.el-pagination .el-pager li {
  color: #c6d3ec !important;
  background-color: transparent !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  color: #40e5f0 !important;
  background-color: transparent !important;
}
.f-pagination .el-pagination.is-background .el-pager li:not(.disabled).active {
  border: none;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover,
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: transparent !important;
}
.f-pagination .el-pagination.is-background .btn-next,
.f-pagination .el-pagination.is-background .btn-prev,
.f-pagination .el-pagination.is-background .el-pager li {
  border: none;
}
.f-pagination .el-pagination button,
.f-pagination .el-pagination span:not([class*="suffix"]) {
  font-size: 14px !important;
  color: #e7f5f6 !important;
}
.f-pagination .el-pagination__editor.el-input {
  width: 50px;
}
.el-pagination__editor {
  .el-input__inner {
    color: #fff;
    background-color: #202f3e;
    border-color: #40e5f0;
    height: 32px;
    line-height: 30px;
  }
}
.f-pagination .el-pagination__editor.el-input .el-input__inner {
  height: 28px;
}
.f-pagination {
  margin-top: 15px;
}
</style>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  //background-color: rgba(10, 31, 53, 1);
  background-color: #1c262d;
  box-sizing: border-box;
  padding: 0 0 10px;
	position: relative;
	overflow: hidden;

	//background: linear-gradient(290.3deg, rgba(9, 19, 24, .5) 23.67%, rgba(32, 49, 54, .5) 100%);
	//border: 1px solid #006686;
	#nav {
		//max-width: 800px;
		height: 36px;
		position: absolute;
		right: 40px;
		top: 8px;
	}

}
.el-dialog {
    .el-dialog__title{
     color: #fff;
    }
    background-color: #1c262d !important;
  }
</style>
